<template>
    <view
        class="tab-bar z-20 bg-white fixed w-full rounded-14 left-0 mx-14 rounded-14 px-6 py-6 box-border flex-justifyAround-itemsCenter-box"
        :class="[isSafeArea ? 'bottom-safe' : 'bottom-20']"
    >
        <!-- 跳转 -->
        <view
            class="flex-col-center-box text-primary fz-18 rounded-14 tab-box h-full"
            :class="{ 'tab-box-active': activeId === item.id }"
            v-for="item in tabBarList"
            :key="item.id"
            @click="handleToPage(item.path)"
        >
            <!-- 图标 -->
            <text :class="['iconfont fz-20', item.icon]"/>
            <view class="fz-12 mt-4">{{ item.name }}</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
defineProps<{
    activeId: 1 | 2 | 3 | 4
}>()

// 导航
const tabBarList = [
	{ id: 1, path: '/pages/announcement/index', icon: 'icon-gonggao', name: '公告' },
	{ id: 2, path: '/pages/homeWork/index', icon: 'icon-zuoye', name: '作业' },
	{ id: 3, path: '/pages/achievement/index', icon: 'icon-chengji', name: '成绩' },
	{ id: 4, path: '/pages/my/index', icon: 'icon-wode', name: "我的" }
]

// 跳转页面
const handleToPage = (path: string) => {
	const isLogin = uni.getStorageSync('isLogin')
	if (isLogin) {
		uni.switchTab({
			url: path
		})
	} else {
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}
}

// 是否有安全区
const isSafeArea = uni.getStorageSync('isSafeArea')
</script>

<style lang="less" scoped>
.tab-bar {
    width: calc(100% - 28px);
    height: 65px;
    box-shadow: rgba(0, 0, 0, 0.12) 0 10px 50px;

    .tab-box {
        width: calc((100% - 140px) / 3);
    }

    .tab-box-active {
        background: rgba(112, 185, 190, .15);
    }

    .big-size {
        width: 100px;
        height: 100px;
    }
}
</style>
